<template>
  <el-card class="card-body">
    <SearchForm :moduleList="moduleList" @getTableData="getTableData" />
    <el-divider style="margin: 0 0 22px 0" />
    <DataTables
      :tableData="tableData"
      :count="count"
      @getTableData="getTableData"
    />
  </el-card>
</template>

<script>
import SearchForm from "./components/SearchForm";
import DataTables from "./components/DataTables";
import { mapMutations } from "vuex";
import { getHonorRollListApi } from "@/api/modules/honor.api";

export default {
  components: {
    SearchForm,
    DataTables,
  },
  data() {
    return {
      tableData: [],
      count: 0,
      page: {
        pageNum: 1,
        pageSize: 10,
      },
      moduleList: [],
    };
  },
  mounted() {
    this.getTableData(this.page);
    this.setBreadcrumb([
      {
        name: "文章管理",
        path: "/writings",
      },
      {
        name: "光荣榜",
        path: "/writings/honor",
      },
    ]);
  },
  methods: {
    ...mapMutations("base", ["setBreadcrumb"]),
    async getTableData({ pageNum = 1, pageSize = 10, ...data }) {
      data.status = data.status ? data.status : 0;
      const res = await getHonorRollListApi({ pageNum, pageSize, ...data });
      // if (localGet("modules")) {
      //   this.moduleList = localGet("modules");
      // } else {
      //   this.moduleList = await getArticleModuleListApi();
      // }
      this.tableData = res.records;
      this.count = res.total;
    },
  },
};
</script>
